@keyframes rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes nav_float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(15px);
  }
}

@keyframes cloud {
  0% {
    right: -20%;
  }

  100% {
    right: 100%;
  }
}

@keyframes plant {
  0% {
    left: -20%;
    bottom: -20%;
  }

  100% {
    left: 120%;
    bottom: 120%;
  }
}

@keyframes car_1 {
  0% {
    right: 10%;
    top: -6%;
    transform: rotate(-90deg);
  }
  15% {
    right: 10%;
    top: 2%;
    transform: rotate(-90deg);
  }
  33% {
    right: 10%;
    top: 2%;
    transform: rotate(0deg);
  }
  66% {
    right: 46%;
    top: 3%;
    transform: rotate(-7deg);
  }
  100% {
    right: 100%;
    top: 14%;
    transform: rotate(-20deg);
  }
}

@keyframes car_2 {
  0% {
    left: -13%;
    top: 60.5%;
    transform: rotate(0deg);
  }
  20% {
    left: 28%;
    top: 59%;
    transform: rotate(0deg);
  }
  30% {
    left: 28%;
    top: 59%;
    transform: rotate(0deg);
  }
  45% {
    left: 70%;
    top: 51.5%;
    transform: rotate(-20deg);
  }
  60% {
    left: 92%;
    top: 42%;
    transform: rotate(-34deg);
  }
  70% {
    left: 94%;
    top: 38%;
    transform: rotate(-85deg);
  }
  100% {
    left: 78%;
    top: -5%;
    transform: rotate(-85deg);
  }
}

@keyframes people_1 {
  0% {
    left: 56%;
    top: 15%;
    transform: rotate(0deg);
  }
  100% {
    left: 33%;
    top: 23%;
    transform: rotate(0deg);
  }
}

@keyframes people_2 {
  0% {
    left: 57%;
    top: 37%;
    transform: rotate(0deg);
  }
  100% {
    left: 42%;
    top: 41%;
    transform: rotate(0deg);
  }
}

@keyframes people_3 {
  0% {
    left: 73%;
    top: 38%;
    transform: rotate(46deg);
  }
  100% {
    left: 51%;
    top: 31%;
    transform: rotate(46deg);
  }
}

.am_nav(@kf: nav_float, @time: 3s, @count: infinite) {
  animation: @kf @time @count;
}